<template>
  <div>
    <div ref="paySuccessBox" class="bg-white pt-35 " style="height:100vh">
      <head-portraitBox
        class="is-120 block-center br-full mb-15"
        :head-portrait-url="orderInfo.StoreLogo"
      />
      <h1 class="tac fs-32 mb-50 lh-xxs">{{ orderInfo.StoreName }}</h1>
      <div class="order-box pos-r">
        <div class="order pos-r">
          <p class="flex-s-c order-p hb fs-26">
            <span>订单状态</span>
            <span>支付成功</span>
          </p>
          <p class="flex-s-c order-p hb fs-26">
            <span>订单尾号</span>
            <span>{{ orderInfo.Sn }}</span>
          </p>
          <p class="flex-s-c order-p hb fs-26">
            <span>支付金额</span>
            <span>￥{{ orderInfo.PayMoney }}</span>
          </p>
        </div>
      </div>
      <div class="pb-60 flex-center mlr-30">
        <van-button class="solid-btn flex-g-1 br-12" native-type="submit" @click="openUserCard">进入首页</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import { GetCashierDetailBySn } from 'api/order'
import { GoldplanJs } from 'utils/url.js'
export default {
  components: {
    headPortraitBox
  },
  props: {
  },
  data() {
    return {
      orderInfo: {},
      Sn: ''
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    const _this = this
    const _query = _this.$route.query
    console.log(_query)
    if (_query && _query.out_trade_no) {
      _this.Sn = _query.out_trade_no
      _this.GetCashierDetailBySn()
      if (document.referrer.indexOf('https://payapp.weixin.qq.com/') !== -1) {
      // 加载点石成金js-sdk(页面没有该sdk则加载)
        const jsList = document.getElementsByTagName('script')
        if (jsList && jsList.length) {
          let hasGoldplanJs = false
          for (var i = 0; i < jsList.length; i++) {
            console.log(jsList[i].src)
            if (jsList[i].src && jsList[i].src === GoldplanJs) {
              hasGoldplanJs = true
              break
            }
          }
          if (!hasGoldplanJs) {
            _this.$utils.loadScript(GoldplanJs)
          }
        }
      }
    } else {
      _this.$toast.fail('订单号有误')
    }
  },
  mounted() {
    parent.postMessage(JSON.stringify({
      action: 'onIframeReady',
      displayStyle: 'SHOW_CUSTOM_PAGE',
      height: 850
    }), 'https://payapp.weixin.qq.com')
  },
  activated() {},
  methods: {
    GetCashierDetailBySn() {
      const _this = this
      GetCashierDetailBySn(_this.Sn).then(res => {
        if (res) {
          var _data = res.Data
          if (_data.Sn) {
            _data.Sn = _data.Sn.substr(_data.Sn.length - 4)
          }
          _this.orderInfo = _data
        }
      })
    },
    openUserCard() {
      console.log(this.$LocalDomain)
      const url = this.$LocalDomain + '/m/home/union?pm=123&storeId=' + this.orderInfo.StoreId
      console.log(document.referrer)
      if (document.referrer.indexOf('https://payapp.weixin.qq.com/') !== -1) {
        parent.postMessage(JSON.stringify({
          action: 'jumpOut',
          jumpOutUrl: url
        }), 'https://payapp.weixin.qq.com')
      } else {
        window.location.href = url
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-box{
  margin-top: 12px;
  &:before{
    content: '';
    position: absolute;
    height: 24px;
    width: calc(100% - 30px);
    border-radius: 12px;
    background: #E5E5E5;
    top: -12px;
    left: 15px;
  }
  .order{
    padding: 60px 30px 80px;
    margin: 0 30px 60px;
    background: #fff;
    box-shadow: 0px 5px 15px rgba(20, 7, 0, 0.14);
  }
  .order-p{
    height: 88px;
    line-height: 88px;
  }
}
</style>
